import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'antd'
interface HellowInter {
  name: string;
  firstName?: string;
  person: {
    name: string;
    age: number;
    xb: string;
  }
}

interface State {
  count: number,
  
}


// const Hellow = (props: HellowInter) => <h1>这是{props.name}组件</h1>


/**
 * React.FC 是react函数式组件的一个缩写
 */



// const Hellow: React.FC<HellowInter> = ({
//   name,
//   firstName,
//   children
// }) => <h1>这是{name}组件{firstName}</h1>
// // 默认属性 设置默认属性 ts要为可选属性
// Hellow.defaultProps = {
//   firstName: '默认的值'
// }

class HellowClass extends Component<HellowInter, State> {
  state: State = {
    count: 0
  }

  // 设置默认属性
  static defaultProps = {
    firstName: '',
    lastName: '',
    person: {
      name: '默认',
      age: '默认',
      xb: 0
    }
  }

  static HellowClass = {
    // firstName: React.PropTypes.string   // 15版本之前 16版本弃用
    firstName: PropTypes.string   // 需要引入专门的包  函数的话为 func
  }

  handleClickCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render(): React.ReactNode {
    const { count } = this.state
    return (
      <div>
        <Button type='primary' onClick={() => {
          this.setState({
            count: count+1
          })
        }}>Hello {this.props.name} {count}</Button>
        <ul>
          <li>姓名: {this.props.person.name}</li>
          <li>性别: {this.props.person.xb}</li>
          <li>年龄: {this.props.person.age + 1}</li>
        </ul>
      </div>
    )
  }
}
// // 默认属性 设置默认属性 ts要为可选属性
// HellowClass. = {
//   firstName: '默认的值'
// }

export default HellowClass